<template>
  <div>
    <Spin :spinning="loading" tip="Loading...">
      <div style="padding-top: 1rem;"></div>
    <!-- table -->
    <FormPanel ref="formPanel" :list="formList1" :cols="1" :formType="'add'" labelWidth="100" :isSubmitBtn="false" @formChange="formChangeHandle" />
    <BaseDialog :visible.sync="visibleDrawer" :title="'三级系统新增'" destroyOnClose :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}">
      <vin @close="closeAdd" @save="saveAdd"></vin>
    </BaseDialog>
    <div style="padding-top: 1rem;"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <multiuse-button type="primary" :click="saveDialog.bind()">保 存</multiuse-button>
      <multiuse-button @click="closeDialog">关 闭</multiuse-button>
    </div>
    </Spin>
  </div>
</template>
<script>
import { getListByPage, newSave } from '@/api/claim/factory/FaultAppearMaintain';
export default {
  components: {
    // Vehicle,
  },
  data() {
    return {
      loading: false,
      dataList1: [],
      visible: false,
      visibleDrawer: false,
      collapse: false,
      visibleAdd: false,
      infoId: null,
      flterValue: {}, //参数
      fetchParams: {}, //ipa 接口
      selectedRows: [], //选中经销商
      formList1: this.createFormList1(),
      saveData: null,
      val: null,
      activeName: '审核记录',
      level: 3,
      sysName1: null,
      sysName2: null,
      sysName3: null

    };
  },
  created() {
    this.getLevelOne();
  },
  methods: {
    //一级下拉框
    async getLevelOne() {
      console.log("===== 获取下拉框数据 ====== ")
      const res = await getListByPage({
        level: 1,
        pageNum: 1,
        pageSize: 99999,
        faStatus: 1
      });
      console.log("==========",res.data);
      if (res.resultCode == 200) {
        this.formList1.find(x => x.fieldName == 'sys1').initialValue = '';
        this.formList1.find(x => x.fieldName == 'sys1').itemList = res.data.records.map(y => ({ text: y.sysName1, value: y.faultId }));
      }
    },
    //二级下拉框
    async getLevelTwoByParentFaultId(parentFaultId) {
      console.log("===== 获取下拉框数据 ====== ")
      this.formList1.find(x => x.fieldName == 'parentFaultId').initialValue = '';
      const res = await getListByPage({
        level: 2,
        pageNum: 1,
        pageSize: 99999,
        parentFaultId: parentFaultId,
        faStatus: 1
      });
      console.log("==========",res.data);
      if (res.resultCode == 200) {
        this.formList1.find(x => x.fieldName == 'parentFaultId').initialValue = '';
        this.formList1.find(x => x.fieldName == 'parentFaultId').itemList = res.data.records.map(y => ({ text: y.sysName2, value: y.faultId }));
      }
    },
    formChangeHandle(val) {
      console.log(val);
      this.saveData = val;
    },
    async saveDialog() {
      this.$refs.formPanel.SUBMIT_FORM();
      if (this.saveData !== null) {
        this.loading = true;
        this.saveData.level = this.level;
        //sys1
        // let itemList = this.formList1
        //   .find(x => x.fieldName == 'sysCode1').itemList;
        // let x = itemList.find(x => x.value == this.saveData.sysCode1);
        // this.saveData.sysName1 = x.text;

        let res = await newSave(this.saveData);
        console.log(res);
        if (res.resultCode === 200) {
          this.$emit('save');
          return this.$notify.success({ title: '提示信息', message: '保存成功' });
        } else {
          this.loading = false;
        }
      }
    },
    chooseOrderNo() {
      this.visibleDrawer = true;
    },
    closeAdd() {
      this.visibleDrawer = false;
      this.fetchParams = { ...this.fetchParams };
    },
    saveAdd() {
      this.visibleDrawer = false;
      this.fetchParams = { ...this.fetchParams };
    },

    //取消操作
    closeDialog() {
      this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
    },
    add() {},
    createFormList1() {
      return [
        {
          type: 'SELECT',
          label: '一级系统名称',
          fieldName: 'sys1',
          placeholder: '请选择一级系统名称...',
          initialValue: '',
          itemList: [],
          rules: [{required: true, message: '请选择一级系统名称...', trigger: 'change'}],
          change: val => {
            console.log("选择一级系统名称", val)
            this.getLevelTwoByParentFaultId(val)
          }
        },
        {
          type: 'SELECT',
          label: '二级系统名称',
          fieldName: 'parentFaultId',
          placeholder: '请选择二级系统名称...',
          initialValue: '',
          itemList: [],
          rules: [{required: true, message: '请选择二级系统名称...', trigger: 'change'}],
          change: val => {
            console.log("选择二级系统名称")
          }
        },
        {
          type: 'INPUT',
          label: '三级系统代码',
          fieldName: 'sysCode3',
          placeholder: '请输入三级系统代码...',
          initialValue: '',
          maxlength: 10,
          rules: [{required: true, message: '请输入三级系统代码...', trigger: 'change'}, {pattern: /^[0-9a-zA-Z]{1,10}$/, message: '请输入字母和数字(最多10位)', trigger: 'blur'}]
          // disabled: true,
          // readonly: true
        },
        {
          type: 'INPUT',
          label: '三级系统名称',
          fieldName: 'sysName3',
          placeholder: '请输入三级系统名称...',
          maxlength: 50,
          initialValue: '',
          rules: [{required: true, message: '请输入三级系统名称...', trigger: 'change'}]
        },
        // {
        //   type: 'INPUT',
        //   label: '二级',
        //   fieldName: 'sysCode2',
        //   placeholder: '请输入二级...',
        //   initialValue: '',
        //   rules: [{required: true, message: '请输入二级...', trigger: 'change'}]
        // },
        // {
        //   type: 'INPUT',
        //   label: '二级名称',
        //   fieldName: 'sysName2',
        //   placeholder: '请输入二级名称...',
        //   initialValue: '',
        //   rules: [{required: true, message: '请输入二级名称...', trigger: 'change'}]
        // },
        // {
        //   type: 'INPUT',
        //   label: '三级',
        //   fieldName: 'sysCode3',
        //   placeholder: '请输入三级...',
        //   initialValue: '',
        //   rules: [{required: true, message: '请输入三级...', trigger: 'change'}]
        // },
        // {
        //   type: 'INPUT',
        //   label: '三级名称',
        //   fieldName: 'sysName3',
        //   placeholder: '请输入三级名称...',
        //   initialValue: '',
        //   rules: [{required: true, message: '请输入三级名称...', trigger: 'change'}]
        // },
        // {
        //   type: 'INPUT',
        //   label: '故障代码',
        //   fieldName: 'sysCode4',
        //   placeholder: '请输入故障代码...',
        //   initialValue: '',
        //   rules: [{required: true, message: '请输入故障代码...', trigger: 'change'}]
        // },
        // {
        //   type: 'INPUT',
        //   label: '故障名称',
        //   fieldName: 'sysName4',
        //   placeholder: '请输入故障名称...',
        //   initialValue: '',
        //   rules: [{required: true, message: '请输入故障名称...', trigger: 'change'}]
        // },
        {
          type: 'SELECT',
          label: '是否有效',
          placeholder: '请选择是否有效...',
          filterable: true,
          fieldName: 'faStatus',
          itemList: [{text: '否', value: 0}, {text: '是', value: 1}],
          rules: [{required: true, message: '请选择是否有效...', trigger: 'change'}]
        }
      ];
    }
  }
};
</script>

<style lang="less" scoped></style>
